import React from 'react';
import Echarts from '@src/common/Echarts';

import buyImg from '@src/assets/img/task.jpg';
import testImg from '@src/assets/img/store.jpg';
import iconImg from '@src/assets/img/icon.png';
import { test, test2 } from './index.less';

interface StateType {
    inputVal: string;
}

interface propType {}

interface Home {
    state: StateType;
    props: propType;
}
class Home extends React.Component<any> {
    change: (e: any) => void;
    constructor(props: any) {
        super(props);
        this.state = { inputVal: '' };
        this.change = (e: any) => {
            this.setState({
                inputVal: e.target.value,
            });
        };
    }

    render() {
        let { inputVal } = this.state;
        return (
            <div>
                <p className={test + ' ' + test2}>hello world !kkkkks</p>
                <img src={buyImg} alt="" />
                <img src={iconImg} alt="" />
                <img src={testImg} alt="" style={{ width: 360, height: 200 }} />
                <div>
                    <input type="text" onChange={this.change} />
                    {inputVal}
                </div>
                <Echarts>
                    <div key="slot1">gdsajonpsjfks;</div>
                    <div key="slot2">456789;</div>
                    <div key="slot3">gdsafds789456;</div>
                </Echarts>
            </div>
        );
    }
}

// function Home() {
//     console.log('home');
//     return (
//         <div>
//             <p className={test + ' ' + test2}>hello world !kkkkks</p>
//             <img src={buyImg} alt="" />
//             <img src={iconImg} alt="" />
//             <img src={testImg} alt="" style={{ width: 360, height: 200 }} />
//             <input type="text" />
//             <Echarts />
//         </div>
//     );
// }
export default Home;
